<template>

  <div class="cf">
    <div class="fll">
      <NMenu
      :options="menuOptions"
      :collapsed="collapsed"
      :inverted="inverted"
      default-value="1"
      @update:value="clickMenuItem"
      />
    </div>
    <div class="flr">
      <n-data-table :columns="columns" :data="data" :pagination="paginations" :bordered="false" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, reactive, onMounted, computed, defineComponent, h } from 'vue';
import { anchorDark, useMessage, NButton } from 'naive-ui';
import { renderIcon } from '@/utils/index';
import { CaretUpOutlined } from '@vicons/antd';
import { getUserInfo } from '@/api/Demo/Demo';
import { useRoute } from 'vue-router';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import {ptVarListGets} from '@/api/GlobalVarMgt/GlobalVarMgt';


const settingStore = useProjectSettingStore();
const message = useMessage();
const emits = defineEmits(['send']);

// 树结构数据
let activeKey = ref<string | null>(null)
let collapsed = ref(false)
const menuOptions = [
  {
    label: '地域树结构',
    key: '0',
    icon: renderIcon(CaretUpOutlined),
    children:[
      {
        label: '1楼机房',
        key: '1',
      },
      {
        label: '2楼机房',
        key: '2',
      },
      {
        label: '3楼机房',
        key: '3',
      }
    ]
  }
  
]
// 获取系统样式
const inverted = computed(() => {
  return ['dark', 'header-dark'].includes(settingStore.navTheme);
});
// 点击树菜单项
const clickMenuItem = (key: string) => {
  activeKey.value = key
}


// 标头数据
const columns = [
  {
    title: '序号',
    key: 'index',
  },
  {
    title: '设备名称',
    key: 'device_name',
  },
  {
    title: '所属主机',
    key: 'host_name',
  },
  {
    title: '测点名称',
    key: 'point_name',
  },
  {
    title: '测点变量名称',
    key: 'point_var_name',
  },
];

// 组件参数
const props = defineProps({
  pageParam: {
    type: Object,
    required: true,
  },
});

// 获取当前路由
const route = useRoute();
// 从路由参数中获取 id
const pageId = route.query.id;
console.log('id', pageId);

// 新增
const add = (row) => {
  // 发送新增消息
  emits('send', 'openAddForm');
};

// 编辑
const edit = (row) => {
  // 发送编辑消息
  emits('send', 'openEditForm', row);
};

// 刷新数据回调用方法
function refresh(params) {
  // 判断params是否传递参数，传递参数需要保存，防止翻页丢失搜索条件
  if (params) {
    Object.assign(searchParams, params);
  }
  search(); // 重新获取列表数据
}

// 列表数据
const data = ref([
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
  {device_name: 1},
]);

const paginations = reactive({
  page: 1,
  pageSize: 14,
  onChange: (page: number) => {
    paginations.page = page

    search();
  },
});
const total = ref(0);

// 列表获取数据
const search = async () => {
  // const params = { ...paginations };
  // const res = await ptVarListGets(params);
  // data.value = res.data;
  // total.value = res.total;
};

function init() {
  search();
}

// 表格需要暴露出init、refresh方法
defineExpose({
  init,
  refresh,
});
</script>

<style lang="less" scoped>
.flr {
  float: right;
  width: 85%;
}

.fll {
  float: left;
  width: calc(100% - 85% - 1px);
  height: calc(100vh - 145px);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.cf:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

.cf {
  zoom: 1;
}

:v-deep .n-tabs.n-tabs--top .n-tab-pane{
  padding: 0 !important;
}

::v-deep .n-menu .n-menu-item-content.n-menu-item-content--selected::before{
  background: linear-gradient( 90deg, #1075C4 0%, rgba(5,13,21,0) 100%);
}
::v-deep .n-menu-item-content__arrow{
  display: none !important;
}

::v-deep .n-data-table-tr .n-data-table-th{
  border: none;
  background: #0E1E2E;
}
::v-deep .n-data-table-tr:nth-child(odd) .n-data-table-td{
  background: #182e46;
  color: #fff;

}

::v-deep .n-data-table-tr:nth-child(even) .n-data-table-td{
  background: #0E1E2E;
  color: #fff;
}
::v-deep .n-data-table .n-data-table-tr:hover{
  background-color: #1075C4 !important;
}

::v-deep  .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td{
  background-color: #1075C4 !important;
}
::v-deep .n-data-table .n-data-table-td{
  border-bottom: none !important;
}
</style>
